<!--红包基本信息-->
<template>
    <div class="bookinfo_hb_info clearfix">
      <div class="clearfix">
        <span class="bookinfo_hb_info_left_icon"><img src="../../..//static/img/bookinfo/hb_icon1.png" alt=""></span>
        <span class="bookinfo_hb_info_center">
          <p>本书已收到 <i class="sum_hb">160</i>元红包</p>
          <p><em>本周收到 <i>3</i>元，排名 <i>100+</i></em></p>
        </span>
        <span class="bookinfo_hb_info_right_icon "><img src="../../..//static/img/bookinfo/hb_icon2.png" alt=""></span>
      </div>
      <div class="send_hb_btn">我要送红包</div>
      <div class="hb_info_rank_list clearfix">
        <ul>
          <li>
            <a href="">
              <img src="../../..//static/img/bookinfo/user1.jpg" alt="">
              <i>名为放哫</i>
            </a>
            <span>18元红包</span>
          </li>
          <li>
            <a href="">
              <img src="../../..//static/img/bookinfo/user2.jpg" alt="">
              <i>名为放哫</i>
            </a>
            <span>18元红包</span>
          </li>
          <li>
            <a href="">
              <img src="../../..//static/img/bookinfo/user3.jpg" alt="">
              <i>名为放哫</i>
            </a>
            <span>18元红包</span>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        msg: '13213'
      }
    }
  }
</script>


<style>

  .bookinfo_hb_info span{ float: left;}
  .bookinfo_hb_info span:nth-child(1){
    margin-left: 20px;
  }
  .bookinfo_hb_info_left_icon img{
    width: 49px;
    margin-top: 5px;
  }
  .bookinfo_hb_info_right_icon img{
    width: 28px;
    margin-top: 15px;
  }
  .bookinfo_hb_info_center{
    width: 180px;
  }
  .bookinfo_hb_info_center .sum_hb{
    color: red;
  }
  .bookinfo_hb_info_center p{
    color:#000;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .send_hb_btn{
margin-top:10px;
    height: 37px;
    width: 100%;
    background: #eb413d;
    line-height: 37px;
    font-size: 18px;
    text-align: center;
    color: #fff;
    border-radius: 6px;
  }
  .hb_info_rank_list{
    margin: 14px 0;
  }
  .hb_info_rank_list ul {
    display: flex;
  }
  .hb_info_rank_list ul li{
    flex: 1;
    float: left;
  }
  .hb_info_rank_list ul li span{
    color: red;
    display: block;
    width: 100%;
    padding-top: 5px;
    font-size: 12px;
    text-align: center;
  }
  .hb_info_rank_list ul li a{
    display: block;
  }
  .hb_info_rank_list ul li a i{
    font-size: 12px;
    line-height: 24px;
    color: #000;
  }
  .hb_info_rank_list ul li img{
    margin-right: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    vertical-align: middle;
  }
</style>
